import React from 'react'
import { StyleSheet, TouchableWithoutFeedback } from 'react-native'
import { View } from 'native-base'
import { useNavigation } from '@react-navigation/native'
import IconBox from './IconBox'

const Menu = ({ list }) => {
  const navigation = useNavigation()
  const to = (index) => {
    console.log('来了')
    navigation.navigate('Category', {
      index
    })
  }
  return (
    <View style={styles.menu}>
      {/* <ScrollView style={styles.scrollView} horizontal={true}> */}
      {
        list.map((item, index) => {
          return (
            <IconBox data={item} onPress={() => to(index)} key={item.name}></IconBox>
          )
        })
      }
      {/* </ScrollView> */}
    </View>
  )
}

export default Menu

const styles = StyleSheet.create({
  menu: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    // backgroundColor: 'red'
  }
})